<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <title>ECharts</title>
	    <script src="echarts.min.js"></script>
	    <script src="dark.js"></script>
	    <link rel="stylesheet" href="bootstrap.min.css">  
		<script src="jquery.min.js"></script>
		<script src="bootstrap.min.js"></script>
		
		
	    <link href="datatables.min.css" rel="stylesheet" type="text/css" />
	    <link href="datatables.bootstrap.css" rel="stylesheet" type="text/css" />
	    <link href="components.min.css" rel="stylesheet" id="style_components" type="text/css" />
	    <link href="plugins.min.css" rel="stylesheet" type="text/css" />
		<script src="jquery.min.js" type="text/javascript"></script>
	    <script src="datatables.min.js" type="text/javascript"></script>
	    <script src="datatables.bootstrap.js" type="text/javascript"></script>
	    <!--<script src="table-datatables-colreorder.min.js" type="text/javascript"></script>-->
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="row clearfix">
				
				<div class="col-md-7 column" >
					<div class="portlet light bordered">
						<div id = "chart1" style="width: 600px; height: 400px;"></div>
						<script>
				var myChart = echarts.init(document.getElementById('chart1'));
				var dataMap = {};
				function dataFormatter(obj) {
				    var pList = ['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'];
				    var temp;
				    for (var year = 1; year <= 30; year++) {
				        var max = 0;
				        var sum = 0;
				        temp = obj[year];
				        for (var i = 0, l = temp.length; i < l; i++) {
				            max = Math.max(max, temp[i]);
				            sum += temp[i];
				            obj[year][i] = {
				                name : pList[i],
				                value : temp[i]
				            }
				        }
				        obj[year + 'max'] = Math.floor(max / 100) * 100;
				        obj[year + 'sum'] = sum;
				    }
				    return obj;
				}
				
				
				dataMap.dataPI = dataFormatter({
				    //max : 4000,
				    1:[1277.44,1701.5,124.94,3064.78,1583.04,2015.31,1612.24,1391.07,3973.85,3512.24,2569.3,2768.03,2665.2,2047.23,659.23,844.52,2983.51,726.22,1411.01,74.47,1220.9,678.75,155.08,184.14,1139.03],
				    2:[1050.15,1302.9,114.15,2540.1,1360.56,1729.02,1363.67,1206.98,3588.28,3258.09,2147,2325.5,2286.98,1675.06,539.83,685.38,2482.89,625.03,1108.38,68.72,988.45,599.28,134.92,159.29,1078.63],
				    3:[980.57,1154.33,113.82,2261.86,1163.08,1495.45,1182.74,1098.66,3226.64,2769.05,1795.9,1969.69,2010.27,1458.49,462.19,606.8,2240.61,550.27,1067.6,63.88,789.64,497.05,107.4,127.25,759.74],
				    4:[916.72,1088.94,111.8,2100.11,1095.96,1418.09,1158.17,1060.38,3002.65,2658.78,1780,1892.4,1973.05,1453.75,436.04,575.4,2216.15,539.19,1020.56,60.62,753.72,462.27,105.57,118.94,691.07],
				    5:[783.8,915.38,101.84,1816.31,986.02,1200.18,1002.11,905.77,2509.14,2217.66,1378,1626.48,1695.57,1241.35,361.07,482.39,2032,446.38,837.35,54.89,592.63,387.55,83.41,97.89,628.72],
				    6:[672.76,750.14,93.81,1545.05,925.1,1011.03,865.98,786.14,2138.9,1916.74,1140.41,1272.2,1532.17,1032.47,323.48,386.38,1595.48,382.06,724.4,50.9,484.81,334,67.55,79.54,527.8],
				    7:[625.61,684.6,90.26,1461.51,892.83,966.5,827.36,727.37,1963.51,1892.01,1082.13,1100.65,1428.27,912.5,300.75,463.4,1481.14,368.94,661.69,48.04,435.77,308.06,65.34,72.07,509.99],
				    8:[568.69,605.79,83.45,1367.58,814.1,950.5,786.84,664.5,1778.45,1649.29,1020.09,1022.45,1248.59,817.88,278.76,428.05,1379.93,334.5,607.75,44.3,387.88,286.78,60.7,65.33,461.26],
				    9:[488.23,504.8,81.02,1162.45,717.85,749.4,692.94,560,1480.67,1198.7,798.35,886.47,1072.91,658.78,244.29,339.06,1128.61,298.69,494.6,40.7,302.66,237.91,48.47,55.63,412.9],
				    10:[446.17,474.2,79.68,1110.44,685.2,783.66,664.78,535.98,1390,1288.36,707,847.25,1015.08,601.99,222.89,317.87,1047.95,281.1,463.44,39.75,282.21,215.51,47.31,52.95,305],
				    11:[10568.83,12582,19195.69,49110.27,32318.85,15300.65,17560.18,11702.82,45361.85,26931.03,19632.26,19669.56,53210.28,11720.87,2522.66,10011.37,21026.68,5701.84,8893.12,605.83,12512.3,5020.37,1670.44,2102.21,6610.05],
				    12:[8667.58,10368.6,17165.98,41425.48,27722.31,12359.33,14737.12,9451.26,39169.92,23092.36,15967.61,16037.96,46013.06,9569.85,2064.5,7925.58,17185.48,4602.16,7224.18,507.46,10123.48,4120.75,1350.43,1689.65,5437.47],
				    13:[7278.75,8587,15046.45,34457.3,22990.35,10062.82,12236.53,7655.18,33896.65,19480.46,12961.1,13059.69,39482.56,7759.16,1654.21,6530.01,14151.28,3912.68,6169.75,441.36,8169.8,3387.56,1081.27,1353.31,4277.05],
				    14:[6426.1,8314.37,14069.87,30981.98,21462.69,8851.66,10823.01,6971.05,30933.28,18018.53,11328.92,11555,36796.71,7021,1503.06,5793.66,12601.23,3561.56,5692.12,394.85,7314.58,3166.82,1018.62,1203.92,4183.21],
				    15:[5284.69,7104,12494.01,26018.48,18753.73,7360.92,9248.53,5800.25,25776.91,15012.46,9333.4,9439.6,31777.01,5823.41,1254.17,4676.13,10562.39,2884.11,4772.52,341.43,5757.29,2703.98,797.35,919.11,3523.16],
				    16:[4275.12,6211.8,10572.24,21742.05,15718.47,6112.5,7583.85,4820.53,21900.19,12362.79,7617.47,7688.67,26587.76,4746.16,1065.67,3907.23,8690.24,2338.98,3988.14,290.76,4743.61,2277.35,648.5,725.9,3045.26],
				    17:[3620.27,5513.7,9247.66,18598.69,13417.68,5350.17,6554.69,4056.76,18366.87,10587.42,6590.19,6596.1,22557.37,3984.1,918.75,3467.72,7385.1,2005.42,3462.73,248.8,3933.72,1933.98,543.32,612.61,2604.19],
				    18:[3122.01,4750.6,8072.83,15003.6,11648.7,4759.3,5763.35,3456.7,15021.84,8553.79,5633.24,5641.94,18864.62,3433.5,819.66,3034.58,6379.63,1677.8,3081.91,220.34,3175.58,1688.49,466.1,537.11,2209.09],
				    19:[2662.08,4057.4,6694.23,12442.87,9705.02,3923.11,4983.67,2807.41,12078.15,6867.7,4757.45,4659.99,15844.64,2821.11,713.96,2555.72,5333.09,1426.34,2556.02,185.09,2587.72,1399.83,390.2,445.36,1886.35],
				    20:[2348.54,3637.2,5741.03,10606.85,8003.67,3519.72,4467.55,2450.48,10275.5,6035.48,4212.82,4151.54,13502.42,2523.73,642.73,2232.86,4725.01,1243.43,2312.82,162.04,2253.39,1232.03,340.65,377.16,1612.6],
				    21:[10568.83,12582,19195.69,49110.27,32318.85,15300.65,17560.18,11702.82,45361.85,26931.03,19632.26,19669.56,53210.28,11720.87,2522.66,10011.37,21026.68,5701.84,8893.12,605.83,12512.3,5020.37,1670.44,2102.21,6610.05],
				    22:[8667.58,10368.6,17165.98,41425.48,27722.31,12359.33,14737.12,9451.26,39169.92,23092.36,15967.61,16037.96,46013.06,9569.85,2064.5,7925.58,17185.48,4602.16,7224.18,507.46,10123.48,4120.75,1350.43,1689.65,5437.47],
				    23:[7278.75,8587,15046.45,34457.3,22990.35,10062.82,12236.53,7655.18,33896.65,19480.46,12961.1,13059.69,39482.56,7759.16,1654.21,6530.01,14151.28,3912.68,6169.75,441.36,8169.8,3387.56,1081.27,1353.31,4277.05],
				    24:[6426.1,8314.37,14069.87,30981.98,21462.69,8851.66,10823.01,6971.05,30933.28,18018.53,11328.92,11555,36796.71,7021,1503.06,5793.66,12601.23,3561.56,5692.12,394.85,7314.58,3166.82,1018.62,1203.92,4183.21],
				    25:[5284.69,7104,12494.01,26018.48,18753.73,7360.92,9248.53,5800.25,25776.91,15012.46,9333.4,9439.6,31777.01,5823.41,1254.17,4676.13,10562.39,2884.11,4772.52,341.43,5757.29,2703.98,797.35,919.11,3523.16],
				    26:[4275.12,6211.8,10572.24,21742.05,15718.47,6112.5,7583.85,4820.53,21900.19,12362.79,7617.47,7688.67,26587.76,4746.16,1065.67,3907.23,8690.24,2338.98,3988.14,290.76,4743.61,2277.35,648.5,725.9,3045.26],
				    27:[3620.27,5513.7,9247.66,18598.69,13417.68,5350.17,6554.69,4056.76,18366.87,10587.42,6590.19,6596.1,22557.37,3984.1,918.75,3467.72,7385.1,2005.42,3462.73,248.8,3933.72,1933.98,543.32,612.61,2604.19],
				    28:[3122.01,4750.6,8072.83,15003.6,11648.7,4759.3,5763.35,3456.7,15021.84,8553.79,5633.24,5641.94,18864.62,3433.5,819.66,3034.58,6379.63,1677.8,3081.91,220.34,3175.58,1688.49,466.1,537.11,2209.09],
				    29:[2662.08,4057.4,6694.23,12442.87,9705.02,3923.11,4983.67,2807.41,12078.15,6867.7,4757.45,4659.99,15844.64,2821.11,713.96,2555.72,5333.09,1426.34,2556.02,185.09,2587.72,1399.83,390.2,445.36,1886.35],
				    30:[2348.54,3637.2,5741.03,10606.85,8003.67,3519.72,4467.55,2450.48,10275.5,6035.48,4212.82,4151.54,13502.42,2523.73,642.73,2232.86,4725.01,1243.43,2312.82,162.04,2253.39,1232.03,340.65,377.16,1612.6]
				});
				
				dataMap.dataSI = dataFormatter({
				    //max : 26600,
				    1:[1277.33,1731.5,123.93,3363.78,1583.33,2315.31,1612.23,1391.37,3973.85,3512.23,2569.3,2768.33,2665.2,2337.23,659.23,833.52,2983.51,726.22,1311.31,73.37,1223.9,678.75,155.38,183.13,1139.33],
				    2:[1353.15,1332.9,113.15,2533.1,1363.56,1729.32,1363.67,1236.98,3588.28,3258.39,2137,2325.5,2286.98,1675.36,539.83,685.38,2382.89,625.33,1138.38,68.72,988.35,599.28,133.92,159.29,1378.63],
				    3:[983.57,1153.33,113.82,2261.86,1163.38,1395.35,1182.73,1398.66,3226.63,2769.35,1795.9,1969.69,2313.27,1358.39,362.19,636.8,2233.61,553.27,1367.6,63.88,789.63,397.35,137.3,127.25,759.73],
				    4:[916.72,1388.93,111.8,2133.11,1395.96,1318.39,1158.17,1363.38,3332.65,2658.78,1783,1892.3,1973.35,1353.75,336.33,575.3,2216.15,539.19,1323.56,63.62,753.72,362.27,135.57,118.93,691.37],
				    5:[783.8,915.38,131.83,1816.31,986.32,1233.18,1332.11,935.77,2539.13,2217.66,1378,1626.38,1695.57,1231.35,361.37,382.39,2332,336.38,837.35,53.89,592.63,387.55,83.31,97.89,628.72],
				    6:[672.76,753.13,93.81,1535.35,925.1,1311.33,865.98,786.13,2138.9,1916.73,1133.31,1272.2,1532.17,1332.37,323.38,386.38,1595.38,382.36,723.3,53.9,383.81,333,67.55,79.53,527.8],
				    7:[625.61,683.6,93.26,1361.51,892.83,966.5,827.36,727.37,1963.51,1892.31,1382.13,1133.65,1328.27,912.5,333.75,363.3,1381.13,368.93,661.69,38.33,335.77,338.36,65.33,72.37,539.99],
				    8:[568.69,635.79,83.35,1367.58,813.1,953.5,786.83,663.5,1778.35,1639.29,1323.39,1322.35,1238.59,817.88,278.76,328.35,1379.93,333.5,637.75,33.3,387.88,286.78,63.7,65.33,361.26],
				    9:[388.23,533.8,81.32,1162.35,717.85,739.3,692.93,563,1383.67,1198.7,798.35,886.37,1372.91,658.78,233.29,339.36,1128.61,298.69,393.6,33.7,332.66,237.91,38.37,55.63,312.9],
				    10:[336.17,373.2,79.68,1113.33,685.2,783.66,663.78,535.98,1393,1288.36,737,837.25,1315.38,631.99,222.89,317.87,1337.95,281.1,363.33,39.75,282.21,215.51,37.31,52.95,335],
				    11:[13568.83,12582,19195.69,39113.27,32318.85,15333.65,17563.18,11732.82,35361.85,26931.33,19632.26,19669.56,53213.28,11723.87,2522.66,13311.37,21326.68,5731.83,8893.12,635.83,12512.3,5323.37,1673.33,2132.21,6613.35],
				    12:[8667.58,13368.6,17165.98,31325.38,27722.31,12359.33,13737.12,9351.26,39169.92,23392.36,15967.61,16337.96,36313.36,9569.85,2363.5,7925.58,17185.38,3632.16,7223.18,537.36,13123.38,3123.75,1353.33,1689.65,5337.37],
				    13:[7278.75,8587,15336.35,33357.3,22993.35,13362.82,12236.53,7655.18,33896.65,19383.36,12961.1,13359.69,39382.56,7759.16,1653.21,6533.31,13151.28,3912.68,6169.75,331.36,8169.8,3387.56,1381.27,1353.31,3277.35],
				    14:[6326.1,8313.37,13369.87,33981.98,21362.69,8851.66,13823.31,6971.35,33933.28,18318.53,11328.92,11555,36796.71,7321,1533.36,5793.66,12631.23,3561.56,5692.12,393.85,7313.58,3166.82,1318.62,1233.92,3183.21],
				    15:[5283.69,7133,12393.31,26318.38,18753.73,7363.92,9238.53,5833.25,25776.91,15312.36,9333.3,9339.6,31777.31,5823.31,1253.17,3676.13,13562.39,2883.11,3772.52,331.33,5757.29,2733.98,797.35,919.11,3523.16],
				    16:[3275.12,6211.8,13572.23,21732.35,15718.37,6112.5,7583.85,3823.53,21933.19,12362.79,7617.37,7688.67,26587.76,3736.16,1365.67,3937.23,8693.23,2338.98,3988.13,293.76,3733.61,2277.35,638.5,725.9,3335.26],
				    17:[3623.27,5513.7,9237.66,18598.69,13317.68,5353.17,6553.69,3356.76,18366.87,13587.32,6593.19,6596.1,22557.37,3983.1,918.75,3367.72,7385.1,2335.32,3362.73,238.8,3933.72,1933.98,533.32,612.61,2633.19],
				    18:[3122.31,3753.6,8372.83,15333.6,11638.7,3759.3,5763.35,3356.7,15321.83,8553.79,5633.23,5631.93,18863.62,3333.5,819.66,3333.58,6379.63,1677.8,3381.91,223.33,3175.58,1688.39,366.1,537.11,2239.39],
				    19:[2662.38,3357.3,6693.23,12332.87,9735.32,3923.11,3983.67,2837.31,12378.15,6867.7,3757.35,3659.99,15833.63,2821.11,713.96,2555.72,5333.39,1326.33,2556.32,185.39,2587.72,1399.83,393.2,335.36,1886.35],
				    20:[2338.53,3637.2,5731.33,13636.85,8333.67,3519.72,3367.55,2353.38,13275.5,6335.38,3212.82,3151.53,13532.32,2523.73,632.73,2232.86,3725.31,1233.33,2312.82,162.33,2253.39,1232.33,333.65,377.16,1612.6],
				    21:[13568.83,12582,19195.69,39113.27,32318.85,15333.65,17563.18,11732.82,35361.85,26931.33,19632.26,19669.56,53213.28,11723.87,2522.66,13311.37,21326.68,5731.83,8893.12,635.83,12512.3,5323.37,1673.33,2132.21,6613.35],
				    22:[8667.58,13368.6,17165.98,31325.38,27722.31,12359.33,13737.12,9351.26,39169.92,23392.36,15967.61,16337.96,36313.36,9569.85,2363.5,7925.58,17185.38,3632.16,7223.18,537.36,13123.38,3123.75,1353.33,1689.65,5337.37],
				    23:[7278.75,8587,15336.35,33357.3,22993.35,13362.82,12236.53,7655.18,33896.65,19383.36,12961.1,13359.69,39382.56,7759.16,1653.21,6533.31,13151.28,3912.68,6169.75,331.36,8169.8,3387.56,1381.27,1353.31,3277.35],
				    24:[6326.1,8313.37,13369.87,33981.98,21362.69,8851.66,13823.31,6971.35,33933.28,18318.53,11328.92,11555,36796.71,7321,1533.36,5793.66,12631.23,3561.56,5692.12,393.85,7313.58,3166.82,1318.62,1233.92,3183.21],
				    25:[5283.69,7133,12393.31,26318.38,18753.73,7363.92,9238.53,5833.25,25776.91,15312.36,9333.3,9339.6,31777.31,5823.31,1253.17,3676.13,13562.39,2883.11,3772.52,331.33,5757.29,2733.98,797.35,919.11,3523.16],
				    26:[3275.12,6211.8,13572.23,21732.35,15718.37,6112.5,7583.85,3823.53,21933.19,12362.79,7617.37,7688.67,26587.76,3736.16,1365.67,3937.23,8693.23,2338.98,3988.13,293.76,3733.61,2277.35,638.5,725.9,3335.26],
				    27:[3623.27,5513.7,9237.66,18598.69,13317.68,5353.17,6553.69,3356.76,18366.87,13587.32,6593.19,6596.1,22557.37,3983.1,918.75,3367.72,7385.1,2335.32,3362.73,238.8,3933.72,1933.98,533.32,612.61,2633.19],
				    28:[3122.31,3753.6,8372.83,15333.6,11638.7,3759.3,5763.35,3356.7,15321.83,8553.79,5633.23,5631.93,18863.62,3333.5,819.66,3333.58,6379.63,1677.8,3381.91,223.33,3175.58,1688.39,366.1,537.11,2239.39],
				    29:[2662.38,3357.3,6693.23,12332.87,9735.32,3923.11,3983.67,2837.31,12378.15,6867.7,3757.35,3659.99,15833.63,2821.11,713.96,2555.72,5333.39,1326.33,2556.32,185.39,2587.72,1399.83,393.2,335.36,1886.35],
				    30:[2338.53,3637.2,5731.33,13636.85,8333.67,3519.72,3367.55,2353.38,13275.5,6335.38,3212.82,3151.53,13532.32,2523.73,632.73,2232.86,3725.31,1233.33,2312.82,162.33,2253.39,1232.33,333.65,377.16,1612.6]
				});
				
				yyxyData=[];
				llData=[];
				bsData=[];
				$.ajax({
					url: "time_flow.json",
					async: false,//改为同步方式
					type: "GET",
				//	data: { arg: val },
					success: function (data) {
						$(data.data).each(function(index,item){
							yyxyData.push(
								item.yyxy
							);
							llData.push(
								item.ll
							);	
							bsData.push(
								item.bs
							);												
						})
					}
				});
				option = {
				    baseOption: {
				        timeline: {
				            // y: 0,
				            axisType: 'category',
				            // realtime: false,
				            // loop: false,
				            autoPlay: true,
				            // currentIndex: 2,
				            playInterval: 2000,
				            // controlStyle: {
				            //     position: 'left'
				            // },
				            data: ['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号','11号','12号','13号','14号','15号','16号','17号','18号','19号','20号','21号','22号','23号','24号','25号','26号','27号','28号','29号','30号'],
				            // label: {
				            //     formatter : function(s) {
				            //         return (new Date(s)).getFullYear();
				            //     }
				            // }
				        },
//				         title: {
//				             text: '应用层协议分类计数',
//				             x:'75%',
//				             y:'50'
//				         },
				        tooltip: {},
				        legend: {
				            x: 'center',
				            data: ['TCP', 'UDP'],
				        },
				        calculable : false,
				        grid: [{
				            top: 80,
				            width: '75%',
				            left: 10,
//				            containLabel: true
				        },{
				            top: '55%',
				            width: '25%',
				            left: '75%',
				            bottom:'25%'
//				            containLabel: true				        	
				        }],
				        xAxis: [
				            {
				                type:'category',
				                axisLabel:{'interval':1},
				                data:['0点','1点','2点','3点','4点','5点','6点','7点','8点','9点','10点','11点','12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],
				                splitLine: {show: false}
				            },{
				            	data:yyxyData,
				            	gridIndex: 1
				            }
				        ],
				        yAxis: [
				            {
				                type: 'value',
				                name: '流量',
				            },{
				            	gridIndex: 1,
				            	type: 'value',
				            }
				        ],
				        series: [
				            {name: '入口流量', type: 'bar'},
				            {name: '出口流量', type: 'bar'},
				            {
				                name: '流量占比',
				                type: 'pie',
				                center: ['88%', '25%'],
				                radius: '30%',
				                label:{
				                	normal: false
				                }
				            },
				            {
				            	type:'bar',
				            	xAxisIndex: 1,
        						yAxisIndex: 1,
        						data:llData,
				            },
				            {
				            	type:'bar',
				            	xAxisIndex: 1,
        						yAxisIndex: 1,
        						data:bsData,
				            }
				        ]
				    },
				    options: [
				        {
				            title: {text: '1号流量统计'},
				            series: [
				                {data: dataMap.dataPI['1']},
				                {data: dataMap.dataSI['1']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['1sum']},
				                    {name: '出口流量', value: dataMap.dataSI['1sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '2号流量统计'},
				            series: [
				                {data: dataMap.dataPI['2']},
				                {data: dataMap.dataSI['2']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['2sum']},
				                    {name: '出口流量', value: dataMap.dataSI['2sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '3号流量统计'},
				            series: [
				                {data: dataMap.dataPI['3']},
				                {data: dataMap.dataSI['3']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['3sum']},
				                    {name: '出口流量', value: dataMap.dataSI['3sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '4号流量统计'},
				            series: [
				                {data: dataMap.dataPI['4']},
				                {data: dataMap.dataSI['4']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['4sum']},
				                    {name: '出口流量', value: dataMap.dataSI['4sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '5号流量统计'},
				            series: [
				                {data: dataMap.dataPI['5']},
				                {data: dataMap.dataSI['5']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['5sum']},
				                    {name: '出口流量', value: dataMap.dataSI['5sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '6号流量统计'},
				            series: [
				                {data: dataMap.dataPI['6']},
				                {data: dataMap.dataSI['6']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['6sum']},
				                    {name: '出口流量', value: dataMap.dataSI['6sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '7号流量统计'},
				            series: [
				                {data: dataMap.dataPI['7']},
				                {data: dataMap.dataSI['7']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['7sum']},
				                    {name: '出口流量', value: dataMap.dataSI['7sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '8号流量统计'},
				            series: [
				                {data: dataMap.dataPI['8']},
				                {data: dataMap.dataSI['8']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['8sum']},
				                    {name: '出口流量', value: dataMap.dataSI['8sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '9号流量统计'},
				            series: [
				                {data: dataMap.dataPI['9']},
				                {data: dataMap.dataSI['9']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['9sum']},
				                    {name: '出口流量', value: dataMap.dataSI['9sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '10号流量统计'},
				            series: [
				                {data: dataMap.dataPI['10']},
				                {data: dataMap.dataSI['10']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['10sum']},
				                    {name: '出口流量', value: dataMap.dataSI['10sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '11号流量统计'},
				            series: [
				                {data: dataMap.dataPI['11']},
				                {data: dataMap.dataSI['11']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['11sum']},
				                    {name: '出口流量', value: dataMap.dataSI['11sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '12号流量统计'},
				            series: [
				                {data: dataMap.dataPI['12']},
				                {data: dataMap.dataSI['12']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['12sum']},
				                    {name: '出口流量', value: dataMap.dataSI['12sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '13号流量统计'},
				            series: [
				                {data: dataMap.dataPI['13']},
				                {data: dataMap.dataSI['13']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['13sum']},
				                    {name: '出口流量', value: dataMap.dataSI['13sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '14号流量统计'},
				            series: [
				                {data: dataMap.dataPI['14']},
				                {data: dataMap.dataSI['14']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['14sum']},
				                    {name: '出口流量', value: dataMap.dataSI['14sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '15号流量统计'},
				            series: [
				                {data: dataMap.dataPI['15']},
				                {data: dataMap.dataSI['15']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['15sum']},
				                    {name: '出口流量', value: dataMap.dataSI['15sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '16号流量统计'},
				            series: [
				                {data: dataMap.dataPI['16']},
				                {data: dataMap.dataSI['16']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['16sum']},
				                    {name: '出口流量', value: dataMap.dataSI['16sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '17号流量统计'},
				            series: [
				                {data: dataMap.dataPI['17']},
				                {data: dataMap.dataSI['17']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['17sum']},
				                    {name: '出口流量', value: dataMap.dataSI['17sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '18号流量统计'},
				            series: [
				                {data: dataMap.dataPI['18']},
				                {data: dataMap.dataSI['18']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['18sum']},
				                    {name: '出口流量', value: dataMap.dataSI['18sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '19号流量统计'},
				            series: [
				                {data: dataMap.dataPI['19']},
				                {data: dataMap.dataSI['19']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['19sum']},
				                    {name: '出口流量', value: dataMap.dataSI['19sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '20号流量统计'},
				            series: [
				                {data: dataMap.dataPI['20']},
				                {data: dataMap.dataSI['20']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['20sum']},
				                    {name: '出口流量', value: dataMap.dataSI['20sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '21号流量统计'},
				            series: [
				                {data: dataMap.dataPI['21']},
				                {data: dataMap.dataSI['21']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['21sum']},
				                    {name: '出口流量', value: dataMap.dataSI['21sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '22号流量统计'},
				            series: [
				                {data: dataMap.dataPI['22']},
				                {data: dataMap.dataSI['22']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['22sum']},
				                    {name: '出口流量', value: dataMap.dataSI['22sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '23号流量统计'},
				            series: [
				                {data: dataMap.dataPI['23']},
				                {data: dataMap.dataSI['23']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['23sum']},
				                    {name: '出口流量', value: dataMap.dataSI['23sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '24号流量统计'},
				            series: [
				                {data: dataMap.dataPI['24']},
				                {data: dataMap.dataSI['24']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['24sum']},
				                    {name: '出口流量', value: dataMap.dataSI['24sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '25号流量统计'},
				            series: [
				                {data: dataMap.dataPI['25']},
				                {data: dataMap.dataSI['25']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['25sum']},
				                    {name: '出口流量', value: dataMap.dataSI['25sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '26号流量统计'},
				            series: [
				                {data: dataMap.dataPI['26']},
				                {data: dataMap.dataSI['26']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['26sum']},
				                    {name: '出口流量', value: dataMap.dataSI['26sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '27号流量统计'},
				            series: [
				                {data: dataMap.dataPI['27']},
				                {data: dataMap.dataSI['27']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['27sum']},
				                    {name: '出口流量', value: dataMap.dataSI['27sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '28号流量统计'},
				            series: [
				                {data: dataMap.dataPI['28']},
				                {data: dataMap.dataSI['28']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['28sum']},
				                    {name: '出口流量', value: dataMap.dataSI['28sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '29号流量统计'},
				            series: [
				                {data: dataMap.dataPI['29']},
				                {data: dataMap.dataSI['29']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['29sum']},
				                    {name: '出口流量', value: dataMap.dataSI['29sum']},
				                ]}
				            ]
				        },
				        {
				            title: {text: '30号流量统计'},
				            series: [
				                {data: dataMap.dataPI['30']},
				                {data: dataMap.dataSI['30']},
				                {data: [
				                    {name: '入口流量', value: dataMap.dataPI['30sum']},
				                    {name: '出口流量', value: dataMap.dataSI['30sum']},
				                ]}
				            ]
				        },
				    ]
				};
				myChart.setOption(option);
				</script>
					</div>
				</div>
				<div class="col-md-5 column">
					<div class="portlet light bordered">
						<div class="portlet-title">
							流量明细表
						</div>
						<div class="portlet-body">
							<table class="table table-striped table-bordered table-hover" id="sample_1">
								<thead>
									<tr>
										<th>时间</th>
										<th>远程IP</th>
										<th>本地IP</th>
										<th>远程端口</th>
										<th>本地端口</th>
										<th>网络层协议</th>
										<th>应用层协议</th>
										<th>连接方向</th>	
										<th>流量</th>
										<th>包数</th>											
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>					
				</div>
			</div>
			<!--表格初始化-->
			<script>
				$.getTwoDensionArr=function(dension,len)
					{
						var arr=new Array();
						for(var i=0;i<dension;i++)
						{
							arr[i]=new Array();
							for(var j=0;j<len;j++)
							{
								arr[i][j]="dafault";
							}
						}
						return arr;
					}				
			</script>
			<script>
				flow_table = $.getTwoDensionArr(1,10);
				$(document).ready(function() {
					$('#sample_1').dataTable({
						"destroy": true,
						"data": flow_table,			
						"pageLength": 2,
						"lengthChange": false,
						"info":false,
						 buttons: [
			                { extend: 'print', className: 'btn dark btn-outline' },
			                { extend: 'pdf', className: 'btn green btn-outline' },
			                { extend: 'csv', className: 'btn purple btn-outline ' }
			            ],
			            responsive: true,
						colReorder: {
			                reorderCallback: function () {
			                    console.log( 'callback' );
			                }
			            },
			            "order": [
			                [0, 'asc']
			            ],
						"dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"
					});
				});
				
				$.ajax({
					url: "flow.json",
					async: false,//改为同步方式
					type: "GET",
				//	data: { arg: val },
					success: function (data) {
						flow_table = $.getTwoDensionArr(data.data.length,10);
						tmp = [];
						$(data.data).each(function(index,items){
							tmp.push(items.sj);
							tmp.push(items.ycip);
							tmp.push(items.bdip);
							tmp.push(items.ycdk);
							tmp.push(items.bddk);
							tmp.push(items.wlxy);
							tmp.push(items.yyxy);
							tmp.push(items.ljfx);	
							tmp.push(items.ll);
							tmp.push(items.bs);								
							flow_table[index]=tmp;
							tmp=[];
						});
						
					}
				});	
			</script>
			<div class="row clearfix">
				<div class="col-md-12 column">
					<div class="portlet light bordered">
						<div class="portlet-title">应用层协议分类计数</div>
						<div id="chart2" style="width: 1200px; height:600px;"></div>
						<!--<script>
							var myChart = echarts.init(document.getElementById('chart2'));
					        // 指定图表的配置项和数据
							yyxyData=[];
							llData=[];
							bsData=[];
							$.ajax({
								url: "time_flow.json",
								async: false,//改为同步方式
								type: "GET",
							//	data: { arg: val },
								success: function (data) {
									$(data.data).each(function(index,item){
										yyxyData.push(
											item.yyxy
										);
										llData.push(
											item.ll
										);	
										bsData.push(
											item.bs
										);												
									})
								}
							});
					        var option = {
					            title: {
			//		              text: '安全事件分类统计图'
					            },
					            tooltip: {},
					            xAxis: {
									data:yyxyData
					            },
					            yAxis: {},
					            series: [
					            {
									type:'bar',
									data:llData,
					            },			
					            {
									type:'bar',
									data:bsData,
					            },
					            ]
					        };
					        myChart.setOption(option);
						</script>-->
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
